<!--vue模板-->
<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
  >
    <!--遍历模块-->
    <template v-for="(m, index) in menus">
      <el-sub-menu :index="''+index">
        <template #title>
          <el-icon><List /></el-icon>
          <span>{{ m.name }}</span>
        </template>

        <!--遍历页面-->
        <template v-for="(p,i) in m.children">
          <el-menu-item :index="index+'-'+i" v-if="!p.ishidden">
            <router-link :to="p.path">{{p.name}}</router-link>
          </el-menu-item>
        </template>


      </el-sub-menu>
    </template>
  </el-menu>
</template>

<!--vue 组件选项定义-->
<script>
export default {
  data() {
    return {
      menus: [],
    };
  },
  created() {
    let tmp = sessionStorage.getItem("erp_privs");
    if (tmp) {
      //说明该账号有权限
      //将tmp转换为json对象
      this.menus = JSON.parse(tmp);
    }
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-menu-item) a {
  color: #fff;
  text-decoration: none;
}
</style>
